<template>
	<view class="page">
		<navHeader leftColor="transparent" rightColor="transparent" backColor="#ffffff">
		</navHeader>
		<image src="../../static/img/indexImg/share-bg.png" class="share_bg"></image>
		<view class='bg-color'></view>
		<view class="share_cont">
			<view class="share-tit">{{i18n.buddy}}</view>
			<view class="share-text">{{i18n.joinIn}}</view>
			<view class="share">
				<view class="codeimg">
					<image class="img" :src='img' mode="scaleToFill"></image>
				</view>
				<view class="s-rt">
					<view class="s-rt-top">
						<view class='tit'>{{i18n.invitationCode}}</view>
						<view class="code">{{refer_code}}</view>
						<text class="iconfont" @click="$copy(refer_code)">&#xe607;</text>
					</view>
					<view class="s-rt-bottom">
						<view class='tit'>{{i18n.invitationLink}}</view>
						<view class='codeurl'>
							<view class="url">{{img_url}}</view>
							<text class="iconfont"  @click="$copy(img_url)">&#xe607;</text>
						</view>
					</view>
				</view>			
			</view>
			<view class="anniu">
				 <view class="bc_img" @click="saveImg">{{i18n.savePic}}</view>
				 <view class="bc_img active" @click="go_share">{{i18n.invitation}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navHeader from '@/components/nav-header/nav-header.vue'
	import { domain, download, agreUser } from '@/config.js';	
	import QR from "@/utils/wxqrcode.js"
	import SaveImg from '@/utils/saveImg.js'
	import SharePage from "@/utils/share.js"
	export default {
		data() {
			return {
				img: '',
				img_url: '',
				refer_code:''
			};
		},
		components: {
			navHeader
		},
		computed: {
		   i18n(){
		   	return this.$t('share');
		   },
		},
		onLoad(option) {
			this.refer_code = option.id
			let domain_name = uni.getStorageSync('available_domain') || domain
			this.img_url = domain_name+'#/pages/login/register?code='+option.id
			this.img = QR.createQrCodeImg(this.img_url, {
				size: parseInt(300)
			})
		},

		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//点击分享
			go_share() {
				var s = new SharePage()
				s.run()
			},
			//保存截图
			saveImg(){
				var s = new SaveImg()
				s.run()
			},

		}
	}
</script>

<style lang="less" scoped>
	.page{
		min-height: 1334upx;
	}
	.share_bg {
		width: 100%;
		height: 1334upx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;
	}
	.bg-color{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: #FE4A27;
		z-index: -2;
	}      
	.share_cont {
		padding: 30upx 30upx 30upx;
	}
	 
	.share-tit{
		font-size: 100upx;
		font-weight: 600;
		text-align: center;
	}
	.share-text{
		font-size: 50upx;
		font-weight: 500;
		text-align: center;
		margin-top: 10upx;
	}
	.share{
		margin-top: 500upx;
		background-color: #ffffff;
		border-radius: 10upx;
		padding: 20upx;
		display: flex;
		align-items: center;
	}
	.codeimg{
		width: 200upx;
		height: 200upx;
		.img {
			width: 200upx;
			height: 200upx;
			padding:5upx;
			background: #ffffff;
		}
	}
	
	.s-rt{
		color: #030719;
		margin-left: 30upx;
		.s-rt-top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.tit{
				font-size: 28upx;
				color: #030719;
				font-weight: 600;
				flex: 1;
			}
			.code{
				background-color: #F1F2F2;
				color: #171A2B;
				font-size: 28upx;
				border-radius: 10upx;
				padding: 10upx 20upx;
			}
			.iconfont{
				font-size: 36upx;
				color: #1c64f3;
				margin-left: 10upx;
				padding: 10upx;
			}
		}
		.s-rt-bottom{
			.tit{
				font-size: 28upx;
				color: #030719;
				font-weight: 600;
				flex: 1;
			}
			.codeurl{
				margin-top: 10upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.url{
					background-color: #F1F2F2;
					color: #171A2B;
					font-size: 24upx;
					border-radius: 10upx;
					padding: 10upx 20upx;
					word-break:break-all;
					word-wrap:break-word;
				}
				.iconfont{
					font-size: 36upx;
					color: #1c64f3;
					margin-left: 10upx;
					padding: 10upx;
				}
			}
		}
	} 
	.anniu{
		display:flex;
		align-items: center;
		justify-content: space-between;
		.bc_img {
			flex: 1;
			height: 100upx;
			line-height: 100upx;
			font-size: 36upx;
			color: #ffffff;
			border-radius: 10upx;
			margin: 30upx auto 0 auto;
			border: 1upx solid #ffffff;
			text-align: center;
		}
		.active{
			margin-left: 30upx;
			background:#ffffff;
			color: #1c64f3;
		}
	}
	
</style>
